<template>
    <div class="ball-wrap">
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="show">
                <div class="inner">
                    <div class="cubeic-add"></div>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
export default {
    name: 'CartAnim',
    data() {
        return {
            show: false
        }
    },
    methods: {
        start(el){  //启动动画接口，传递点击按钮元素el
            this.el = el

            //使ball元素显示,激活动画钩子
            this.show = true
        },
        beforeEnter(el) {
            // 设置小球初始位置
           // 小球移动到点击的位置
           // 1. 获取点击的dom位置
            //把小球移动到点击的dom元素位置
            const rect = this.el.getBoundingClientRect()
            //转换为用于绝对定位的坐标 2. 把小球移动到点击的位置
            const x = rect.left - window.innerWidth / 2
            const y = -(window.innerHeight - rect.top - 30)
            //ball只移动y
            el.style.transform = `translate3d(0,${y}px,0)`
            //inner只移动x
            const inner = el.querySelector('.inner')
            inner.style.transform = `translate3d(${x}px,0,0)`
        },
        enter(el, done) {
            // 把小球移动到初始位置 加上动画
            // 获取offsetHeight就会重绘，前面的变量名随意 主要为了eslint校验
            //获取offsetHeight触发重绘
            document.body.offsetHeight
            //指定动画结束位置
            // 动画开始，移动到初始位置
            // 小球移动到购物车位置
            el.style.transform = 'translate3d(0,0,0)'
            const inner = el.querySelector('.inner')
            inner.style.transform = 'translate3d(0,0,0)'
            el.addEventListener('transitionend', done)
        },
        afterEnter(el) {
            //动画结束后隐藏ball元素 // 结束 隐藏小球
            this.show = false
            el.style.display = 'none'
            // 派发事件，通知父组件动画结束
            this.$emit("transitionend")
        }
    }
}
</script>
<style scoped lang="stylus">
.ball-wrap{
    .ball{
        position: fixed
        left: 30%
        bottom: 10px
        z-index: 10000
        transition: all .4s cubic-bezier(0.49,-0.29,0.75,0.41)
        .inner{
            width: 16px
            height: 16px
            //background: red
            border-radius: 50%           
            transition: all 0.5s linear
            .cubeic-add{                
                font-size: 22px  
                color: red               
}
        }
    }
}

</style>